<template>
  <el-dialog
    customClass="customWidth"
    :visible.sync="visible"
    @close="$emit('update:show', false)"
    :show="show"
    style="width: 80%; margin-left: 10%"
  >
    <el-form :inline="true" :model="searchFrom" class="demo-form-inline" :rules="rules" ref="passWordForm">
      <el-col>
        <el-form-item label="请输入用户名：" prop="username">
          <el-input
            v-model="searchFrom.username"
            placeholder="请输入新用户名"
            style="width: 13.9286rem"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item label="请输入新密码：" prop="newpassword1">
          <el-input
            v-model="searchFrom.newpassword1"
            placeholder="请输入新密码"
            type="password"
            style="width: 13.9286rem"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item label="请确认新密码：" prop="newpassword2">
          <el-input
            v-model="searchFrom.newpassword2"
            placeholder="请确认新密码"
            type="password"
            style="width: 13.9286rem"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="ok">确 定</el-button>
    </div>
  </el-dialog>
</template>
 
<script>
import { Message } from "element-ui";

import { editpwd } from "api/editpwd";
export default {
  data() {
    var checkPassWord2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.searchFrom.newpassword1) {
        callback(new Error('两次输入密码不一致！'))
      }
      return callback()
    }
    return {
      searchFrom: {},
      multipleSelection: [],
      visible: this.show,
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        newpassword1: [
          { required: true, message: '新密码不能为空', trigger: 'blur' },
          // { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' },
        ],
        newpassword2: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { validator: checkPassWord2, trigger: 'blur', required: true }
        ]
      }
    }
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    show() {
      this.visible = this.show;
    },
  },
  methods: {
    reset() {
      console.log("sd");
    },
    //查询
    query() {
      console.log("sd");
    },
    close() {
      this.$emit("close");
      this.searchFrom = {};
    },
    ok() {
      var _that = this;
      this.$refs['passWordForm'].validate((value) => {
        if (value) {
          if (this.searchFrom.newpassword1 == this.searchFrom.newpassword2) {
        let password = this.searchFrom.newpassword1;
        let username = this.searchFrom.username;
        editpwd({ password, username }).then((res) => {
          Message({
            message: "修改成功",
            type: "success",
            duration: 5 * 1000,
          });
          this.$emit("ok", _that.searchFrom);
          this.searchFrom = {};
        });
      } else {
        Message({
          message: "密码两次不一致",
          type: "error",
          duration: 5 * 1000,
        });
      }
        }
      })
    },
  },
  mounted() {},
};
</script>
 <style scoped>
</style>
